﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="~/Content/Site.css" rel="stylesheet" media="screen">
    <title>Register</title>
</head>
<body>
    @if (TempData["Error"] != null)
    {
        <div class="alert alert-error">
            @TempData["Error"]
        </div>
    }

    @if (TempData["Success"] != null)
    {
        <div class="alert alert-success">
            @TempData["Success"]
        </div>
    }

    
    <div id="loginBody">
        <h2>Register</h2>
        <div id="add_user" class="well span6">
            <h4>User Information</h4>

            <form class="form-horizontal" method="POST" action="~/Login/RegisterUser">
                <div class="control-group">
                    <label class="control-label" for="username" >Username</label>
                    <div class="controls"> 
                        <input type="text" name="username" pattern="[A-Za-z0-9]{1,10}" title="Only letters and numbers" required />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="password">Password</label>
                    <div class="controls">
                        <input type="text" name="password" pattern="[A-Za-z0-9]+" title="Only letters and numbers" required />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="firstname">First Name</label>
                    <div class="controls">
                        <input type="text" name="firstname" pattern="[A-Za-z]+" title="Only letters" required/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="lastname">Last Name</label>
                    <div class="controls">
                        <input type="text" name="lastname" pattern="[A-Za-z]+" title="Only letters" required />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="email">Email Address</label>
                    <div class="controls">
                        <input type="text" name="email" pattern="\w+&#64;\w+\.[\w.]+" title="Valid email" required />
                    </div>
                </div>
                <h4>Shipping Information</h4>
                <div class="control-group">
                    <label class="control-label" for="address">Address</label>
                    <div class="controls">
                        <input type="text" name="address" pattern="[A-Za-z0-9 ]+" title="Only letters and numbers" required />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="city">City</label>
                    <div class="controls">
                        <input type="text" name="city" pattern="[A-Za-z ]+" title="Only letters and numbers" required />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="state">State</label>
                    <div class="controls">
                        <input type="text" name="state" pattern="[A-Z]{2}" title="Two digit, Uppercase" required />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="zip">Zip Code</label>
                    <div class="controls">
                        <input type="text" name="zip" pattern="[\d]{5}" title="Valid zip code" required />
                    </div>
                </div>
                <h4>Credit Card Information</h4>
                <div class="control-group">
                    <label class="control-label" for="cardNumber" >Credit Card Number</label>
                    <div class="controls">
                        <input type="text" name="cardNumber" pattern="[\d]{16}" title="Valid credit card numbers, no dashes or spaces" required />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="expDate">Expiration Date</label>
                    <div class="controls">
                        <input type="text" name="expDate" pattern="\d{2}\/\d{2}" title="MM/YY" required />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="secCode">Security Code</label>
                    <div class="controls">
                        <input type="text" name="secCode" pattern="\d{3}" title="Valid security code" required />
                    </div>
                </div>
                <input type="submit" class="btn btn-primary" value="Submit" />
            </form>
        </div>
    </div>
</body>
<script src="~/Scripts/bootstrap.min.js"> </script>
</html>
